{% extends 'globalPage.html' %}
{% load filter %}
<title>{% block title %}云学习平台{% endblock %}</title>
{% block body %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" style="padding: 0;" href="{% url 'home' %}"><img style="height: 50px;"
                                                                                         src="/static/image/logo.png"
                                                                                         alt="Band"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'home' %}">首页</a></li>
                    <li><a href="{% url 'courses' 'firstGrade' 'allCourses' 1 %}">全部课程</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if user.is_authenticated %}
                        <li><a href="javascript:;" style="margin-top: 5px">你好，{{ user.first_name }}</a></li>
                        <li class="dropdown">
                            <a id="dLabel" data-target="#" href="javascript:;" data-toggle="dropdown"
                               role="button" aria-haspopup="true" aria-expanded="false">
                                <img class="img-circle" src="/static/image/Head.jpg" alt="head"
                                     style="height: 30px;">
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li><a href="{% url 'personalCenter' %}" style="text-align: center">个人中心</a></li>
                                <li><a href="{% url 'history' %}" style="text-align: center">播放历史</a></li>
                                <li><a href="{% url 'logout' %}" style="text-align: center">退出登陆</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="{% url 'login' %}">登陆/注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    <div style="padding: 50px 0 10px;">
        <div class="container" style="padding: 0; background: white">
            <h3>{{ course.videoname }}</h3>
            <h5>{{ course.coursename }}</h5>
            <div class="videoWrap">
                <div id="videoContent" style="float: left">
                    <video id='my-video' class='video-js vjs-default-skin vjs-big-play-centered' controls
                           preload='auto' width='805' height='450'
                           data-setup='{}'>
                        <source src='{{ course_video_id|getCourseVideoUrl }}' type='video/mp4'>
                        <p class='vjs-no-js'>
                            To view this video please enable JavaScript, and consider upgrading to a web browser
                            that
                            <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5
                                video</a>
                        </p>
                    </video>
                </div>
                <div class="panel panel-info" style="float: right; width: 350px;height: 450px;">
                    <div class="panel-heading"><h3 class="panel-title">课程列表</h3></div>
                    <div style="width: 350px;height: 411px; overflow: scroll">
                        <div class="list-group">
                            {% for courseVideo in courseVideos %}
                                {% if courseVideo.id == course_video_id %}
                                    <a href="{% url 'videoPlayer' course.courseurl courseVideo.courses_id courseVideo.id %}"
                                       class="list-group-item active">{{ courseVideo.videoname }}</a>
                                {% else %}
                                    <a href="{% url 'videoPlayer' course.courseurl courseVideo.courses_id courseVideo.id %}"
                                       class="list-group-item">{{ courseVideo.videoname }}</a>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container" style="background: white; padding: 20px 30px 50px 20px">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="javascript:;">全部评论</a></li>
        </ul>
        <div class="media" style="margin-bottom: 40px">
            <div class="media-left">
                <a href="javascript:;">
                    <img class="media-object img-circle" style="height: 50px;" src="/static/image/head.jpg" alt="">
                </a>
            </div>
            <div class="media-body">
                <div class="input-group input-group-lg" style="width: 100%">
                    <input id="my_comment" type="text" class="form-control" placeholder="请说一说你对课程的看法吧"
                           aria-describedby="sizing-addon1">
                </div>
            </div>
            <div class="media-right" style="padding: 5px 0 0 10px;">
                <input class="btn btn-info" type="button" onclick="toComment()" value="发表评论">
            </div>
        </div>
        <div id="user_comments" style="margin-top: 20px">
            {% csrf_token %}
            {% if userComments %}
                {% for userComment in userComments %}
                    <div class="media" style="margin-bottom: 30px">
                        <div class="media-left">
                            <a href="javascript:;">
                                <img class="media-object img-circle" style="height: 50px;" src="/static/image/head.jpg"
                                     alt="">
                            </a>
                        </div>
                        <div class="media-body" style="border-bottom: 1px solid grey;">
                            <h4 class="media-heading" style="font-weight: bold">{{ userComment.user_id|getFirstName }}</h4>
                            {{ userComment.words }}
                        </div>
                        <div class="media-right"
                             style="padding: 5px 0 0 10px; border-bottom: 1px solid grey; width: 1000px">
                            <h5 style="margin-bottom: 10px; color: grey">{{ userComment.commenttime|date:"Y-m-d H:i:s" }}</h5>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div style="width: 100%; height: 200px;display: flex;
			align-items: center;
			justify-content: center;">
                    <img style="height: 100px;" src="/static/image/logo.png">
                    <div class="alert alert-info" role="alert">
                        暂时没有评论,赶紧抢占沙发吧^_^
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

{% endblock %}
{% block jsOfPage %}
    <script>
        // 自定义video控件
        function videoJs() {
            var page = {{ page }};
            var length = {{ length }};
            videojs("my-video", {
                // 播放速度
                playbackRates: [0.5, 1, 1.5, 2]
            }, function () {
                // 添加视频切换按钮
                var forward = document.createElement('button');
                forward.className = "vjs-play-control vjs-control vjs-button";
                var ControlBar = document.getElementsByClassName('vjs-control-bar')[0];
                if (page < length) {
                    forward.innerHTML = '<a href="{% url 'videoPlayer'  course.courseurl course.id current%}"><span aria-hidden="true" class="glyphicon glyphicon-step-forward" style="color:white;"></span>' +
                        '<span class="vjs-control-text" aria-live="polite">forward</span></a>';
                    ControlBar.insertBefore(forward, document.getElementsByClassName('vjs-play-control')[0].nextSibling)
                }
            })
        }

        videoJs();

        // 发表评论
        function toComment() {
            var my_comment = $("#my_comment").val();
            var courses_id = "{{ course.id }}";
            if (my_comment) {
                $.ajax({
                    url: {% url 'toComment' %},
                    type: "POST",
                    data: {
                        "my_comment": my_comment,
                        "courses_id": courses_id,
                        "csrfmiddlewaretoken": $('input[name="csrfmiddlewaretoken"]').val()
                    },
                    success: function (data) {
                        $("#user_comments").html(data);
                        $("#my_comment").val("");
                    }
                })
            } else {
                alert("您还未填写任何评论内容");
            }
        }
    </script>
{% endblock %}